<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<link href="jsPlugin/layui/css/layui.css" rel='stylesheet' />
<link href='css/form-style.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css"
	href="jsPlugin/semantic/semantic.min.css">
<script src="js/jquery.js"></script>
<script src="jsPlugin/semantic/semantic.min.js"></script>
<script src="jsPlugin/layui/layui.js"></script>
<link href='css/chosen.css' rel='stylesheet' />
<script src="js/chosen.jquery.js"></script>
</head>
<body>
	<div class="form-div">
		<form class="layui-form layui-box layui-form-pane" id="addsupervise">
			<div class="layui-form-item">
				<label class="layui-form-label">收文时间</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="rdate" id="rdate"
						placeholder="收文时间"
						onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
				</div>
				<label class="layui-form-label">来文单位</label>
				<div class="layui-input-inline">

					<select name="organiz" id="organiz">
						<%-- <c:forEach items="${organizList }" var="item">
						<option value="${item.id }">${item.user_organiz_name }</option>
					</c:forEach> --%>
						<c:forEach items="${rec_organiz}" var="item">
							<option value="${item.value }">${item.text }</option>
						</c:forEach>
					</select>
				</div>
				<label class="layui-form-label">来文原号</label>
				<div class="layui-input-inline">
					<input type="text" name="rec_sno" id="rec_sno" placeholder="来文原号"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">文件类型</label>
				<div class="layui-input-inline">
					<select name="type" id="type">
						<c:forEach items="${type}" var="item">
							<option value="${item.value }">${item.text }</option>
						</c:forEach>
					</select>
				</div>
				<label class="layui-form-label">文件编号</label>
				<div class="layui-input-inline">
					<input type="text" name="info_sno" id="info_sno" placeholder="文件编号"
						class="layui-input">
				</div>

				<label class="layui-form-label">批示类型</label>
				<div class="layui-input-inline">
					<select name="app_type" id="app_type">
						<c:forEach items="${app_type}" var="item">
							<option value="${item.value }">${item.text }</option>
						</c:forEach>
					</select>
				</div>
			</div>

			<div class="ui segment" id="image_segment">
				<div class="image"></div>
				<input type="file" name="file" class="layui-upload-file"
					lay-ext="jpg|png|gif" lay-title="批示文件扫描（图片）" id="upimg"> <input
					type="hidden" id="info_img">
			</div>



			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">来文简要内容</label>
				<div class="layui-input-block">
					<textarea name="title" id="title" placeholder="简要内容"
						class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">领导批示内容及要求</label>
				<div class="layui-input-block">
					<textarea name="con" id="con" placeholder="请输入内容"
						class="layui-textarea"></textarea>
				</div>
			</div>
			<!-- 要求内容 -->
			<div class="layui-form-item">
				<label class="layui-form-label">办理期限</label>
				<div class="layui-input-block">
					<select name="limit" id="limit">
						<c:forEach items="${limit }" var="item">
							<option value="${item.value }">${item.text }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			
<%-- 			<div class="layui-form-item" id="dorganizs" >
				<label class="layui-form-label">承办单位</label>
				<div class="layui-input-block">
					<select data-placeholder="Select Your Options" name="dorganiz" id="dorganiz" render="false" multiple style="width:100%;">
					    <option></option>
						<c:forEach items="${organizList }" var="item">
							<option value="${item.id }">${item.user_organiz_name }</option>
						</c:forEach>
					</select>
				</div>
			</div> --%>
			
			<div class="layui-form-item" id="dorganizs" >
				<label class="layui-form-label">承办单位
				  <i class="layui-icon" onclick="displayCheckbox()" style="cursor: pointer;" id="check-box-i" title="点击展开">&#xe608;</i>
				</label>
				<div class="layui-input-block" id="check-box" style="display:none;">
						<c:forEach items="${organizList }" var="item">
							<input type="checkbox" name="organizs" value="${item.id }" title="${item.user_organiz_name }">
						</c:forEach>
				</div>
				
			</div>

		</form>
	</div>
</body>

<script type="text/javascript">
var ors = '';
var texts = '';
var dt = new Array();
	layui
			.use(
					[ 'form', 'laydate', 'upload', 'layer' ],
					function() {
						var form = layui.form(), layer = layui.layer, $ = layui.jquery;
						$('.layui-upload-button').css('background-color',
								'rgba(0,0,0,.2)');
						var abc = null;
						var imgele = '';
						var urlval = '';
						layui.upload({
							url : 'news/app/upload',
							before : function(input) {

								abc = layer.load(0, {
									time : 10 * 1000
								});
							},
							success : function(res) {
								layer.close(abc);
								if (urlval) {
									urlval += ',';
								}
								urlval += res.url;
								imgele += '<img src='+res.url+' alt="....."> ';
								$('#info_img').val(urlval);
								$('#image_segment .image').html(imgele);

								//$('#upimg').addClass('layui-disabled');
							}
						});
						form
								.on(
										'select(dorganiz)',
										function(data) {
											
											var text = data.elem.options[data.elem.selectedIndex].text
											var ids = $("#d-organizs").val();
											texts += text+',';
											dt[data.value] = text
											var _texts='';
											$(dt).each(function(i,item){
												if(item){
												_texts += '<a class="ui label transition visible" style="display: inline-block !important;line-height: 1.65em; padding: .1833em .833em;">'
													+ item
													+ '<i class="layui-icon" style="font-size: 1em; color: #767676;cursor: pointer; margin-left: 1em;" data-val="'
													+   i
													+ '" data-t="'
													+ item
													+ '" onclick="del_icon(this)">&#x1006;</i></a>';
												}
											});
											/* texts += '<a style="display: inline-block !important;line-height: 2.65em; color:black;">'
													+ text
													+ '<i class="layui-icon" style="font-size: 1em; color: #ccc;cursor: pointer;" data-val="'
													+ data.value
													+ '" data-t="'
													+ text
													+ '" onclick="del_icon(this)">&#x1006;</i></a>'; */
											ids += data.value + ',';
											$('#d-organizs').val(ids);
											//$(data.elem.parentElement).find('div input')[0].value = texts;
											$(data.elem.parentElement)
													.find('.layui-select-title')
													.html('<div class="layui-input layui-unselect">'
															+_texts+ '<i class="layui-edge"></i></div>');
											//选中移除
											$(data.elem.parentElement)
													.find(
															'.layui-anim-upbit li[lay-value="'
																	+ data.value
																	+ '"]')
													.css("display", "none");
										});
						
						
						

					});
	//$('#check-box .dropdown').dropdown();
	//chosen初始化
 	/* $("#dorganiz").chosen({
		placeholder_text_multiple: '选择单位',
		no_results_text: '什么也没搜到!',
		width: '99%'
	});  */
	function del_icon(dom) {
    	var v = $(dom).attr('data-val');
    	var t = $(dom).attr('data-t');
		$(dom).parents().find('#dorganizs .layui-anim-upbit li[lay-value="'
				+ v
				+ '"]').css("display", "block");
		var dom1 = $(dom).parent().parent();
		$(dom).parent().remove();
		if(!dom1.html()){
			dom1.html('<input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i>');
		}
	/* 	var s = '<a style="display: inline-block !important;line-height: 2.65em; color:black;">'
		+ t
		+ '<i class="layui-icon" style="font-size: 1em; color: #ccc;cursor: pointer;" data-val="'
		+ v
		+ '" data-t="'
		+ t
		+ '" onclick="del_icon(this)">&#x1006;</i></a>'; */
		//t = new RegExp('/\s*'+t+',\s*/');
		//texts = texts.replace(t,'');
		dt[v] = undefined ;
		var ids = $("#d-organizs").val().replace(v+',','');
		
		$("#d-organizs").val(ids);
		
	}
	function vdform() {
		var flag1 = false;
		layui.use([ 'layer' ], function() {
			var layer = layui.layer, $ = layui.jquery;
			$('form input, select, textarea').each(function(i, item) {

				/* 	if(item.id = 'info_img' && !item.value && item.type == 'hidden'){
						
						layer.tips('请上传附件', '#image_segment', {tips: [3, 'red'],tipsMore: true});
					} */

				if (item.name != 'file' && item.type != 'hidden' && item.id != 'dorganiz') {

					if (!item.value) {
						layer.tips('内容不能为空', item, {
							tips : [ 3, 'red' ],
							tipsMore : true
						});
					}
					if (item.type == 'checkbox') {
						if (item.checked) {
							flag1 = true;
						}
					}
				}
		/* 		if (item.id == 'd-organizs' && item.type == 'hidden') {
					if (!item.value) {
						layer.tips('请选择下发部门', '#dorganiz', {
							tips : [ 3, 'red' ],
							tipsMore : true
						});
					}
 */
		/* 		 if (item.id == 'dorganiz') {
						if (!item.value) {
							layer.tips('请选择下发部门', '#dorganiz_chzn', {
								tips : [ 3, 'red' ],
								tipsMore : true
							});
					}
 
				} */
				 if (item.name == 'organizs') {
						if (item.checked) {
						 flag1 = true;
					}

				}
			});

	 	if(!flag1){
			 layer.tips('请选择下发部门', '#check-box-i', {tips: [3, 'red'],tipsMore: true});
			 } 
		});
	}
	
	
function displayCheckbox(){
	var s = $('#check-box').css('display');
	if(s == 'none'){
		$('#check-box').css('display', 'block'); 
	}else{
		$('#check-box').css('display', 'none'); 
	}
}
</script>
</html>